//封装二级菜单
function dropdown(enterE, dropE) {
    let timer;
    enterE.addEventListener("mouseenter", () => {
        clearTimeout(timer);
        dropE.style.display = "block";
        dropE.style.opacity = '1';
        dropE.style.transform = 'translateY(0)';
    });
    enterE.addEventListener("mouseleave", () => {
        dropE.style.opacity = '0';
        dropE.style.transform = 'translateY(-10px)';
        timer = setTimeout(() => {
            dropE.style.display = "none";
        }, 300);
    });
    return timer;
}



// 顶栏二级菜单
// const news_dropdowns = document.querySelectorAll('.news_dropdown');
// const top_bar_newss = document.querySelectorAll('.top_bar_news');
const publish_dropdowns = document.querySelectorAll('.publish_dropdown');
const top_bar_publishes = document.querySelectorAll('.top_bar_publish');
const topBarPersonals = document.querySelectorAll('.top-bar-personal');
const personalDropdowns = document.querySelectorAll('.personal-dropdown');
const personalImgs = document.querySelectorAll('.profiles');
const loginBtns = document.querySelectorAll('.login-btn');
const personalEnters = document.querySelectorAll('.personal-enter');
const loginOuts = document.querySelectorAll('.login-out');
const dopostEssays = document.querySelectorAll('.dopostEssay');
const creatorCenters = document.querySelectorAll('.creator-Center');
loginBtns.forEach(loginBtn => {
    loginBtn.addEventListener('click', () => {
        console.log("11");
        location.href = "/user/login";
    });
})
loginBtns.forEach(loginBtn => {
    loginBtn.addEventListener('submit', function (event) {
        event.preventDefault();
        console.log('表单的默认提交行为已被取消');
    });
})

if (dopostEssays) {
    dopostEssays.forEach(dopostEssay => {
        dopostEssay.addEventListener('click', function (event) {
            if (isLoggedIn) {
                location.href = "/NewsController/toPost";
            } else {
                showAlert("请先登录", 'red');
            }
        })
    })
}

// 封装通用跳转函数
function bindClickToPersonalPage(selectors, url) {
    const elements = typeof selectors === 'string'
        ? document.querySelectorAll(selectors)
        : selectors;
    //过滤掉不存在的元素
    const validElements = Array.from(elements).filter(el => el);

    validElements.forEach(element => {
        element.addEventListener('click', (event) => {
            event.preventDefault();
            console.log(`触发跳转：${element.className || element.id}`);
            location.href = url;
        });
    });
}

//进入个人主页

bindClickToPersonalPage('.personal-enter', '/user/personal_page');

bindClickToPersonalPage('.top-bar-personal-image', '/user/personal_page');


// 为每个导航栏元素添加下拉菜单效果
function setupDropdowns() {
    // top_bar_newss.forEach((top_bar_news, index) => {
    //     dropdown(top_bar_news, news_dropdowns[index]);
    // });
    top_bar_publishes.forEach((top_bar_publish, index) => {
        dropdown(top_bar_publish, publish_dropdowns[index]);
    });

    topBarPersonals.forEach((topBarPersonal, index) => {
        const personalImg = personalImgs[index];
        const personalDropdown = personalDropdowns[index];
        if (!personalImg) {
            console.log('personalImgs[index] 不存在');
            return;
        }

        function updateDropdownVisibility() {
            console.log(personalImg.style.display);

            if (personalImg.style.display === 'block' || personalImg.style.display === '') {
                dropdown(topBarPersonal, personalDropdown);
                personalDropdown.style.pointerEvents = 'auto';
            } else {
                personalDropdown.style.display = 'none';
                personalDropdown.style.pointerEvents = 'none';
            }
        }

        // 初始化下拉菜单状态
        updateDropdownVisibility();
        //前往个人主页
        personalEnters.forEach(personalEnter => {
            personalEnter.addEventListener('click', () => {
                location.href = "/user/personal_page";
            })
        })
        //前往创作中心
        if (creatorCenters) {
            creatorCenters.forEach(creatorCenter => {
                creatorCenter.addEventListener('click', () => {
                    // event.preventDefault()
                    location.href = "/creator";
                })
            })
        }
        // 登出按钮点击事件
        loginOuts.forEach(loginOut => {
            loginOut.addEventListener('click', function (e) {
                e.preventDefault();
                window.location.href = '/user/logout'; // 直接跳转到登出接口
                localStorage.removeItem('userInfo');
                localStorage.removeItem('isLoggedIn');
            });
        })

        // 监听 img 显示状态变化
        const observer = new MutationObserver(updateDropdownVisibility);
        observer.observe(personalImg, { attributes: true, attributeFilter: ['style'] });


    });
}

// 执行设置下拉菜单的操作
setupDropdowns();
//导航栏的分类
function goToCategory(categoryId) {
    sessionStorage.setItem('currentCategoryId', categoryId);
    window.location.href = `/category/${categoryId}`;
}

const topBarLis = document.querySelectorAll('.top_bar_li');
topBarLis.forEach(function (topBarLi) {
    topBarLi.addEventListener('click', function () {
        console.log(this.id);
        const categoryId = this.id;

        goToCategory(categoryId);
    });
});
//导航栏的搜索
